﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Why Echarts?</title>
<link rel="stylesheet" href="css/why-echarts-m.css">
<script src="../asset/js/jquery.min.js"></script>
<script src="js/dist/echarts.js"></script>
<style type="text/css">
.error {
	color: #f66;
}

.success {
	color: orange;
}

.echarts-tooltip {
	text-align: left;
}
</style>
</head>

<body>
	<div class="page">
		<div id="p-up" class="page-up disabled">《 上一页</div>
		<div id="p-down" class="page-down">下一页 》</div>
	</div>
	<div id="content">
		<section class="section active" style="left: 0" id="first">
			<img src="../asset/img/about/HelloWorld2.png" alt="ECharts"
				style="max-width: 100%; max-height: 100%; margin-bottom: 10px;">
			<h1>- ECharts Mobile Launch -</h1>
			<small style="line-height: 38px;">ECharts-m 1.0.0 ( beta )</small>
		</section>

		<section class="section">
			<h1 style="padding: 20px 0">业界已经有多如牛毛的图表库了！</h1>
			<hr />
			<h2 style="padding: 20px 0">
				Why <strong style="color: #9acd32">ECharts</strong> ? </2>
		</section>

		<section class="section">
			<h1 style="padding: 20px 0">深度数据互动可视化</h1>
			<p class="fragment">
				<small>打破单纯的视觉呈现，拥有<strong>互动图形用户界面（GUI）</strong>的数据可视化。数据呈现<strong>不仅是诉说</strong>，而是允许用户对所呈现数据进行<strong>挖掘、整合</strong>，让可视化成为<strong>辅助人们进行视觉化思考</strong>的方式。
				</small>
			</p>
			<br />
			<hr>
			<p style="padding: 20px 0">
				<small>让我们看看<a href="http://ecomfe.github.io/echarts/"
					target="_blank">ECharts</a>为此目标做了什么？
				</small>
			</p>
		</section>

		<section class="section">
			<div class="main" optionKey="calculable"></div>
		</section>

		<section class="section">
			<div class="main" optionKey="magicType"></div>
		</section>

		<section class="section">
			<div class="main" optionKey="dataRange"></div>
		</section>

		<section class="section">
			<div class="main" optionKey="dataZoom"></div>
		</section>


		<section class="section">
			<div class="main" optionKey="timeline"></div>
		</section>

		<section class="section">
			<div class="main" optionKey="scatter"></div>
		</section>

		<section class="section">
			<div class="main" optionKey="force"></div>
		</section>

		<section class="section">
			<div class="main" optionKey="gauge"></div>
		</section>

		<section class="section">
			<div class="main" optionKey="funnel"></div>
		</section>

		<section class="section">
			<div class="main" optionKey="mix"></div>
		</section>

		<section class="section">
			<div class="main"
				style="height: 500px; background-color: transparent"
				optionKey="effect2"></div>
		</section>

		<section class="section">
			<div class="main"
				style="height: 500px; background-color: transparent"
				optionKey="effect3"></div>
		</section>

		<section class="section">
			<h4>ECharts VS Excel</h4>
			<p class="fragment">
				<small>虽说Excel输出的图表毫无交互性可言，但其丰富的图表类型和配置项，简单易用，无疑是最常用的制作数据统计的工具。那看看ECharts和Excel都支持哪些图表类型？</small>
			</p>
			<div>
				<table style="margin-top: 20px;">
					<thead>
						<tr>
							<th>#</th>
							<th>ECharts</th>
							<th>Excel</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>柱状图</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>条形图</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>折线图</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>面积图</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>散点图</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>气泡图</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>K线图</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>饼图</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>环形图</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>雷达图</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>力导布局图</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>和弦图</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>曲面图</td>
							<td class='error'>No</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>地图</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>事件河流图</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
					</tbody>
				</table>
			</div>
		</section>

		<section class="section">
			<h4>ECharts VS Highcharts (1)</h4>
			<p class="fragment">
				<small>业界有无数js图表库，不乏优秀的代表，如chartjs，amCharts，FusionCharts，flot，gRaphaël等等。有的是免费甚至开源的，有的则是商业的，百度一下就能找到他们。</small>
				<br /> <small>无法跟他们一一对比，在这选择了知名度很高的Highcharts，一个优秀，成熟的商业图表库。
					<br />先看看ECharts和Highcharts都支持哪些图表类型？
				</small>
			</p>
			<div>
				<table>
					<thead>
						<tr>
							<th>#</th>
							<th>ECharts</th>
							<th>Highcharts</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>柱状图（条形图）</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>折线图（面积图）</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>饼图（环形图）</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>散点图（气泡图）</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>雷达图</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>K线图</td>
							<td>Yes</td>
							<td class='success'>Highstock</td>
						</tr>
						<tr>
							<td>力导布局图</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>和弦图</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>地图</td>
							<td>Yes</td>
							<td class='success'>Highmap</td>
						</tr>
						<tr>
							<td>事件河流图</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>特色图表（如仪表盘）</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
					</tbody>
				</table>
			</div>
		</section>

		<section class="section">
			<h4>ECharts VS Highcharts (2)</h4>
			<p class="fragment">
				<small>再来看看ECharts和Highcharts都有哪些特性？</small>
			</p>
			<div>
				<table style="width: 105%">
					<thead>
						<tr>
							<th>#</th>
							<th>ECharts</th>
							<th>Highcharts</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>拖拽重计算</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>数据视图</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>动态类型切换</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>值域漫游</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>大规模散点</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>炫光特效</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>多图联动</td>
							<td>Yes</td>
							<td class='error'>No</td>
						</tr>
						<tr>
							<td>数据区域缩放</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>图例开关</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>多维度堆积</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>混搭</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>图片导出</td>
							<td>Yes</td>
							<td>Yes</td>
						</tr>
						<tr>
							<td>License<br />&amp;<br />Pricing
							</td>
							<td class='success'>Baidu<br />
							<a
								href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt"
								target="_blank">BSD</a><br />Free
							</td>
							<td class='success'>Non-commercial<br />free under CC3.0<br />Commercial
								licenses<br />$90~$3600
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</section>

		<section class="section">
			<h4>这就是ECharts</h4>
			<p class="fragment">
				<small>我们只是尽我们所能为你呈现数据<span style="color: #f50">真实</span>的一面，
				</small>
			</p>
			<p class="fragment">
				<small>并且提供了一些直观、易用的交互方式以方便你对所展现数据进行<span
					style="color: #f50">挖掘、提取、修正或整合</span>，<br />
				<strong>（拖拽重计算、数据视图）</strong></small>
			</p>
			<p class="fragment">
				<small>让你可以更加<span style="color: #f50">专注</span>于你所关心地方，无论是系列选择、区域缩放还是数值筛选，<br />
				<strong>（图例开关、数据区域缩放、值域漫游）</strong></small>
			</p>
			<p class="fragment">
				<small>让你可以有<span style="color: #f50">不同的方式解读同样的数据</span>。<br />
				<strong>（动态类型切换，多维度堆积，多图联动，混搭）</strong></small>
			</p>
			<hr />
			<div class="fragment">
				<p>
					<small><strong>重新定义数据图表的时候到了</strong>，浏览ECharts所输出的图表，你不再只是个“读者”，你可以参与其中。
						<br />
					<br />这就是<a href="http://ecomfe.github.io/echarts/" target="_blank"
						sdtyle="margin:0">ECharts</a>，我们正在打造的一个拥有<strong>互动图形用户界面（GUI）</strong>的数据可视化工具。</small>
				</p>
			</div>
		</section>

		<section class="section">
			<h4>致谢</h4>
			<p class="fragment">
				<small> <a href="http://ecomfe.github.io/echarts/"
					target="_blank">ECharts</a>的发展离不开他们的卓越贡献：<br /> <a
					href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a>
					<a href="http://weibo.com/pissang" target="_blank">@pissang</a> <a
					href="http://weibo.com/errorrik" target="_blank">@errorrik</a> <a
					href="http://weibo.com/forain" target="_blank">@diysimon</a> <a
					href="http://weibo.com/u/2113446991" target="_blank">@宿爽</a> <a
					href="http://weibo.com/u/2810393271" target="_blank">@邓红启</a> <a
					href="http://weibo.com/wind108369" target="_blank">@杨骥wind108369</a>
					<a href="http://weibo.com/loutongbing" target="_blank">@娄同兵</a>
				</small>
			</p>
			<br />
			<p class="fragment">
				<small>以及他们的摇旗呐喊、推波助澜、煽风点火...<br /> <a
					href="http://weibo.com/taiyun" target="_blank">@cloud_wei</a> <a
					href="http://weibo.com/u/2042635201" target="_blank">@李湛lizhan</a>
					<a href="http://weibo.com/wfsr" target="_blank">@i我佛山人</a> <a
					href="http://weibo.com/firede" target="_blank">@赵雷_Firede</a> <a
					href="http://weibo.com/zhouyummy" target="_blank">@Yummy_zhou</a>
				</small>
			</p>
			<br />
			<p class="fragment">
				<small>还有，能得到你们的支持，真好...<br /> <a
					href="http://weibo.com/u/2006785117" target="_blank">@财财某</a> <a
					href="http://weibo.com/shenhaolaoshi" target="_blank">@沈浩老师</a> <a
					href="http://weibo.com/cosname" target="_blank">@统计之都</a> <a
					href="http://weibo.com/u/1494921451" target="_blank">@大数据文摘</a>
				</small>
			</p>
			<br />
			<p class="fragment">
				<small>当然，我们期待你的<a href="https://github.com/ecomfe/echarts"
					target="_blank">加入</a>~
				</small>
			</p>
		</section>

		<section class="section">
			<img src="../asset/img/echarts-logo2.png" alt="ECharts"
				style="width: 100px; margin-top: 50px;">
			<h1 style="padding: 50px 0 20px;">- THE END -</h1>
			<p>Thank you</p>
			<br />
			<div>
				<small>Created by <a href="http://weibo.com/kenerlinfeng"
					target="_blank">@Kener-林峰</a></small>
			</div>

		</section>
	</div>
	<script src="./js/why-echarts-m.js"></script>
</body>
</html>